<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>文化课考试设置</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../css/xadmin.css">
    <script type="text/javascript" src="../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
    <script src="../js/base.js"></script>
    <script src="../js/jquery.min.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<style>
    .layui-btn {
        height: 30px !important;
        line-height: 30px !important;
    }
</style>

<body>
    <div class="layui-fluid">
        <div class="layui-row">
            <div class="layui-col-md12">
                <div class="layui-card" style="display: flex;justify-content: space-between;">
                    <div class="layui-card-body ">
                        <blockquote class="layui-elem-quote" style="border:0;font-size: 18px;color: #000;">考试设置
                        </blockquote>
                    </div>
                </div>
            </div>
            <div class="layui-col-md12">
                <form class="layui-form" style="width: 600px;margin: 40px auto;">
                    <div class="layui-form-item" style="padding-top: 15px">
                        <label class="layui-form-label">
                            <span class="x-red">*</span>申请等级
                        </label>
                        <div class="layui-input-inline">
                            <select name="level" id="level" lay-verify="required" lay-filter="level" lay-search>
                                <option value="1">1级</option>
                                <option value="2">2级</option>
                                <option value="3">3级</option>
                                <option value="4">4级</option>
                                <option value="5">5级</option>
                                <option value="6">6级</option>
                                <option value="7">7级</option>
                                <option value="8">8级</option>
                                <option value="9">9级</option>
                                <option value="10">10级</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="examinationTitleNumber" class="layui-form-label">
                            <span class="x-red">*</span>题目数量
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" id="examinationTitleNumber" name="examinationTitleNumber" required=""
                                lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                        <input id="id" type="hidden">
                    </div>
                    <div class="layui-form-item">
                        <label for="passScore" class="layui-form-label">
                            <span class="x-red">*</span>及格分数线
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" id="passScore" name="passScore" required="" lay-verify="required"
                                autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="passScore" class="layui-form-label">
                            <span class="x-red">*</span>考试时长
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" id="durationTime" name="durationTime" required="" lay-verify="required"
                                autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class="x-red">*</span>考试日期
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" id="time" name="time" required="" lay-verify="date" autocomplete="off"
                                class="layui-input">
                        </div>
                        <button type="button" class="layui-btn" id="add">添加</button>
                    </div>
                    <div id="timeDiv">
                    </div>
                    <div class="layui-form-item" style="text-align: center">
                        <button type="submit" lay-filter="add" lay-submit="" class="layui-btn">确定</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script>
        layui.use(['form', 'layer', 'laydate'],
            function () {
                $ = layui.jquery;
                var form = layui.form,
                    layer = layui.layer;
                var laydate = layui.laydate;
                //执行一个laydate实例
                laydate.render({
                    elem: '#time' //指定元素
                        ,
                    format: 'yyyy-MM-dd'
                });
                var a = 1;
                $("#add").click(function () {
                    $("#timeDiv").append(' <div class="layui-form-item">\n' +
                        ' <label class="layui-form-label">\n' +
                        '                </label>' +
                        '                <div class="layui-input-inline">\n' +
                        '                <input type="text" id="time' + a +
                        '"  name="time" required="" lay-verify="date"\n' +
                        '            autocomplete="off" class="layui-input">\n' +
                        '                </div><button type="button" class="layui-btn layui-btn-danger" onclick="delDiv(this)">删除</button>' +
                        '                </div>');
                    laydate.render({
                        elem: '#time' + a //指定元素
                            ,
                        format: 'yyyy-MM-dd'
                    });
                    a++;
                })

                form.on('select(level)', function (data) {
                    $("#timeDiv").children().remove()
                    $.ajax({
                        type: "post",
                        url: findExaminationSetting,
                        data: {
                            level: data.value
                        },
                        success: function (res) {
                            if (res.msg == '0') {
                                if (res.examinationSetting) {
                                    $("#examinationTitleNumber").val(res.examinationSetting
                                        .examinationTitleNumber);
                                    $("#passScore").val(res.examinationSetting.passScore);
                                    $("#id").val(res.examinationSetting.id);
                                    $("#durationTime").val(res.examinationSetting.durationTime);
                                    layui.form.render("select")
                                    $("#time").val(res.examinationSetting.examinationTime[0]
                                        .time);
                                    for (var i = 1; i < res.examinationSetting.examinationTime
                                        .length; i++) {
                                        $("#timeDiv").append(
                                            ' <div class="layui-form-item">\n' +
                                            ' <label class="layui-form-label">\n' +
                                            '                </label>' +
                                            '                <div class="layui-input-inline">\n' +
                                            '                <input type="text" id="time' +
                                            a +
                                            '"  name="time" required="" lay-verify="date"\n' +
                                            '            autocomplete="off" class="layui-input" value="' +
                                            res.examinationSetting.examinationTime[i].time +
                                            '">\n' +
                                            '                </div><button type="button" class="layui-btn layui-btn-danger" onclick="delDiv(this)">删除</button>' +
                                            '                </div>');
                                        laydate.render({
                                            elem: '#time' + a //指定元素
                                                ,
                                            format: 'yyyy-MM-dd'
                                        });
                                        a++;
                                    }
                                } else {
                                    $("#examinationTitleNumber").val("");
                                    $("#passScore").val("");
                                    $("#id").val("");
                                    $("#durationTime").val("");
                                    $("#time").val("");
                                }
                            }
                        },
                        error: function (error) {
                            console.log(error)
                        }
                    })
                });
                $.ajax({
                    type: "post",
                    url: findExaminationSetting,
                    data: {
                        level: $("#level").val()
                    },
                    success: function (res) {
                        if (res.msg == '0') {
                            if (res.examinationSetting) {
                                $("#examinationTitleNumber").val(res.examinationSetting
                                    .examinationTitleNumber);
                                $("#passScore").val(res.examinationSetting.passScore);
                                $("#id").val(res.examinationSetting.id);
                                $("#durationTime").val(res.examinationSetting.durationTime);
                                $("#time").val(res.examinationSetting.examinationTime[0].time);
                                for (var i = 1; i < res.examinationSetting.examinationTime
                                    .length; i++) {
                                    $("#timeDiv").append(' <div class="layui-form-item">\n' +
                                        ' <label class="layui-form-label">\n' +
                                        '                </label>' +
                                        '                <div class="layui-input-inline">\n' +
                                        '                <input type="text" id="time' + a +
                                        '"  name="time" required="" lay-verify="date"\n' +
                                        '            autocomplete="off" class="layui-input" value="' +
                                        res.examinationSetting.examinationTime[i].time + '">\n' +
                                        '                </div><button type="button" class="layui-btn layui-btn-danger" onclick="delDiv(this)">删除</button>' +
                                        '                </div>');
                                    laydate.render({
                                        elem: '#time' + a //指定元素
                                            ,
                                        format: 'yyyy-MM-dd'
                                    });
                                    a++;
                                }
                            }
                        }
                    },
                    error: function (error) {
                        console.log(error)
                    }
                })


                //监听提交
                form.on('submit(add)',
                    function (data) {
                        console.log(data.field); //获取到表单信息
                        var time = $("#time").val() + ",";
                        //发异步，把数据提交给php
                        $("#timeDiv input").each(function () {
                            time += $(this).val() + ",";
                        })
                        $.ajax({
                            type: "post",
                            url: examinationSettingSave,
                            data: {
                                examinationTitleNumber: $("#examinationTitleNumber").val(),
                                passScore: $("#passScore").val(),
                                level: $("#level").val(),
                                time: time.substring(0, time.length - 1),
                                id: $("#id").val(),
                                durationTime: $("#durationTime").val(),
                            },
                            success: function (res) {
                                console.log(res)
                                if (res.msg == 0) {
                                    layer.alert("操作成功", {
                                        icon: 6
                                    }, function (index) {
                                        //关闭当前frame
                                        layer.close(index);
                                        window.location.reload();
                                    });
                                } else {
                                    layer.alert(res.msg, function (index) {
                                        if (res.msg == "session已失效，请重新登录") {
                                            parent.parent.window.location.href =
                                                getRequestPrefix() +
                                                "/footBallAdmin/login.html"
                                        } else {
                                            layer.close(index);
                                        }
                                    });
                                }
                            },
                            error: function (error) {
                                console.log(error)
                            }
                        })
                        return false;
                    });
            });

        function delDiv(item) {
            console.log($(item).parent())
            $(item).parent().remove();
        }
    </script>
</body>

</html>